<!-- 悬浮窗-风格 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="组件样式" name="1">
            <el-row>
                <el-col :span="9" :offset="1">
                    <div :class="{ 'native': widgetType === 'suspension' }" class="suspension-mode" @click="onSelectType('suspension')">
                        <div class="item-content mode0">
                            <div class="item-content-li"></div>
                            <div class="item-content-li"></div>
                            <div class="item-content-li"></div>
                        </div>
                        <div class="title-mark">固定悬浮窗</div>
                    </div>
                </el-col>
                <el-col :span="9" :offset="1">
                    <div :class="{ 'native': widgetType === 'new-suspension' }" class="suspension-mode" @click="onSelectType('new-suspension')">
                        <div class="item-content mode1">
                            <div class="item-content-li"></div>
                        </div>
                        <div class="title-mark">收缩悬浮窗</div>
                    </div>
                </el-col>
            </el-row>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { ElMessage } from 'element-plus'
import useWidget from '@/libs/edit/widgetData'
import widgetTemplates from '@/components/edit/template-data/widget-data'
export default defineComponent({
    name: 'SuspensionMode',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)
        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const {
            onCloneWidget,
            onSelectWidget
        } = useWidget()

        const onSelectType = type => {
            if (widgetType.value === type) return
            if (!widgetTemplates[type]) {
                ElMessage({
                    message: '该组件不存在',
                    type: 'warning',
                })
                return
            }
            const widgetTemplate = onCloneWidget(widgetTemplates[type])
            widget.value.parentContent[widget.value.widgetIndex] = widgetTemplate
            onSelectWidget([widgetTemplate.eles.id])
        }

        return {
            widget,
            widgetType,
            onSelectType
        }
    }
})
</script>

<style lang="less" scoped>
.suspension-mode {
    display: inline-block;
    width: 75px;
    height: 75px;
    border: 1px solid var(--edit-border-color-darker);
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    &.native {
        border-color: var(--edit-color-primary);
    }
    .item-content {
        width: 100%;
        height: 100%;
        background-color: var(--edit-border-color);
        &.mode0 {
            .item-content-li {
                width: 19px;
                height: 19px;
                background-color: var(--edit-text-color-disabled);
                margin: 0 auto;
                margin-bottom: 3px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        &.mode1 {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            .item-content-li {
                width: 19px;
                height: 19px;
                background-color: var(--edit-text-color-disabled);
            }
        }
    }
    .title-mark {
        text-align: center;
        margin-top: 10px;
        white-space: nowrap;
    }
}
</style>